<%
/**
 *  edit 账号编辑
 * 
 * @author  李荣华
 * @version v1.0
 * @date    2017-12-26
 * @since   JSP 2.3.1
 */
%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="at" uri="http://www.jketing.com/at"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>账号编辑</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta content="no-cache" http-equiv="Pragma"/>
	<meta content="no-cache" http-equiv="Cache-Control"/>
	<meta content="0" http-equiv="Expires"/>
	<meta name="GENERATOR" content="MSHTML 8.00.6001.18854"/>
	<link rel="stylesheet" id="edit" type="text/css" href="<at:url css="edit.css"/>" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/common.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/select.js"></script>
	<script type="text/javascript" src="<at:url js="edit.js"/>"></script>
	<script type="text/javascript">
		function reset() {
			document.getElementById("webForm").reset();
		}
		
		/**
		 * 提交数据
		 */
		function submit() {
			$("#webForm").submit();
		}
	
		/**
		 * 返回列表
		 */
		function ret() {
			if (window.confirm('数据没保存，你确定要返回列表吗？')) {
				//window.history.back(-1);因要删除进入更新编辑页时保存在session中的查询数据，故不能使用js退回
				setTimeout(
					function() {
						//js重定向到列表
						window.location.href = "${pageContext.request.contextPath}/account/list";
					}, 0);
			}
		}
			
		/**
		 * 初始化角色列表（包括系统角色、用户角色） 
		 */
		function initRole(){
			  var i,j;
		      for(i=0;i<document.webForm.accountRoleList.options.length;i++){
		        for(j=0;j<document.webForm.sysRoleList.options.length;j++){
		          if(document.webForm.accountRoleList.options[i].value==document.webForm.sysRoleList.options[j].value){
		            document.webForm.sysRoleList.options[j]=null;	           
		          }
		        }
		      }
		      refreshResultRoleList();
		}
		
		function addRole(){
			 if(document.webForm.sysRoleList.selectedIndex==-1){
			        alert('请选择系统角色！');
			        return;
			      }
			  var ind=document.webForm.accountRoleList.length+1;
		      document.webForm.accountRoleList.options.length=ind;
		      var selectedInd=document.webForm.sysRoleList.selectedIndex;
		      document.webForm.accountRoleList.options[ind-1].value=document.webForm.sysRoleList.options[selectedInd].value;
		      document.webForm.accountRoleList.options[ind-1].text=document.webForm.sysRoleList.options[selectedInd].text;
		      document.webForm.sysRoleList.options[selectedInd]=null;
		      refreshResultRoleList();
		}
	
		function delRole(){
			if(document.webForm.accountRoleList.selectedIndex==-1){
		        alert('请选择用户角色！');
		        return;
		      }
			var ind=document.webForm.sysRoleList.length+1;
		    document.webForm.sysRoleList.options.length=ind;
		    var selectedInd=document.webForm.accountRoleList.selectedIndex;
		    document.webForm.sysRoleList.options[ind-1].value=document.webForm.accountRoleList.options[selectedInd].value;
		    document.webForm.sysRoleList.options[ind-1].text=document.webForm.accountRoleList.options[selectedInd].text;
		    document.webForm.accountRoleList.options[selectedInd]=null;
		    refreshResultRoleList();
		}
		
		function refreshResultRoleList(){
			document.webForm.roleResult.value='';
			var i;
			for(i=0;i<document.webForm.accountRoleList.options.length;i++){
				document.webForm.roleResult.value+=document.webForm.accountRoleList.options[i].value;
				if(i<document.webForm.accountRoleList.options.length-1)
					document.webForm.roleResult.value+=',';
			}	       
		}
		
		/**
		 * 找开职工单选对话框
		 */
		function employeeSingleSelect(id,name){
			var myObject = new Object();
			myObject.pWindow = window;
			myObject.id = document.getElementById(id);
			myObject.name = document.getElementById(name);
		    window.showModalDialog('${pageContext.request.contextPath}/employee/singleSelect',
		    myObject, 'dialogWidth: 352px; dialogHeight: 442px; edge: Raised; center: Yes; help: Yes; resizable: No; scroll:No; status: No;');
		}

		/**
		 * 找开职工多选对话框
		 */
		function employeeMultiSelect(ids,names){
			var myObject = new Object();
			//myObject.pWindow = window;
			myObject.breakcall = multiBreakcall;
			myObject.idValues = document.getElementById(ids).value;
			myObject.nameValues = document.getElementById(names).value;
			myObject.ids = ids;
			myObject.names = names;
		    window.showModalDialog('${pageContext.request.contextPath}/employee/multiSelect',
		    myObject, 'dialogWidth: 482px; dialogHeight: 442px; edge: Raised; center: Yes; help: Yes; resizable: No; scroll:No; status: No;');	
		}
		
		jQuery(document).ready(function(){
			initRole();
           });	
	</script>
	<c:set value="${pageContext.request.contextPath}/account" var="url"></c:set>
	<c:if test="${entity.id != null }">
		<c:set value="${pageContext.request.contextPath}/account/${entity.id}" var="url"></c:set>
	</c:if>
</head>
<body>		
	<form:form action="${url}" method="POST" modelAttribute="entity"
		class="form-style" id="webForm" name="webForm">
		<c:if test="${entity.id != null }">
			<form:hidden path="id" />
			<input type="hidden" name="_method" value="PUT" />
		</c:if>
		<input type="hidden" name="page" value="${page}" />
		<input type="hidden" name="order" value="${order}" />
		<!-- 位置 -->
		<div style="margin-left: 10px; margin-top: 10px">
			当前位置：<a href="#">系统配置</a>-&gt;<font color="#ff0000">系统账号</font>
		</div>
		<!-- 按钮行 -->
		<div class="edit_top">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td width="4" height="24" id="kj2z03"></td>
					<td class="biao3_xia">
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td height="24" class="biao4_zhong">
									<div id="nav_01">
										<ul>
											<li><a href="#" onclick="ret();">返回</a></li>
											<li><a href="#" onclick="submit();">提交</a></li>
										</ul>
									</div>
								</td>
							</tr>
						</table>
					</td>
					<td width="4" height="24" id="kj2y03"></td>
				</tr>
			</table>
		</div>
		<div class="edit_main">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td width="1" class="biao3_zuo"></td>
								<td>
									<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td>
												<table width="100%" border="0" cellspacing="0"
													cellpadding="0" rules="groups">
													<tr>
														<td width="20%" height="100%" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5"
																cellpadding="5">
																<tr>
																	<td align="right" class="font_1">账号类型</td>
																</tr>
															</table>
														</td>
														<td width="30%" height="100%">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="91%" align="left">
																		<select class="select" id="type" name="type" style="width:90.5%">
																			<c:forEach items="${types}" var="item">
																				<c:choose>
																					<c:when test="${entity.type==item.enName}">
																				   		<option value="${item.enName}" selected='selected'>${item.name}</option>
																				   	</c:when> 
																				   	<c:otherwise>
																				   		<option value="${item.enName}">${item.name}</option>
																				   	</c:otherwise>  
																				</c:choose>
																			</c:forEach>
																		</select>
																		<font color="red">*</font>												
																	</td>																																							
																</tr>
															</table>
														</td>
														<td width="20%" height="100%" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5"
																cellpadding="5">
																<tr>
																	<td align="right" class="font_1">账号范围</td>
																</tr>
															</table>
														</td>
														<td width="30%" height="100%">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="91%" align="left">
																		<select class="select" id="range" name="range" style="width:90.5%">
																			<c:forEach items="${ranges}" var="item">
																				<c:choose>
																					<c:when test="${entity.range==item.enName}">
																				   		<option value="${item.enName}" selected='selected'>${item.name}</option>
																				   	</c:when> 
																				   	<c:otherwise>
																				   		<option value="${item.enName}">${item.name}</option>
																				   	</c:otherwise>  
																				</c:choose>
																			</c:forEach>
																		</select>
																		<font color="red">*</font>												
																	</td>																																							
																</tr>
															</table>
														</td>
													</tr>
													<!-- 行分割线 -->
													<tr>
														<td height="1" class="biaotiao_xia" colspan="4"></td>
													</tr>
													<tr>
														<td width="20%" height="100%" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5"
																cellpadding="5">
																<tr>
																	<td align="right" class="font_1">所属人</td>
																</tr>
															</table>
														</td>
														<td width="30%" height="100%">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="91%" align="left">
																		<input class="validate[required]"
																			type="hidden" id="personId" name="person.id"
																			value="${entity.person.id}" /> 
																		<input id="personName"
																			name="person.name"
																			onclick="employeeSingleSelect('personId','personName');"
																			value="${entity.person.name}" alt="所属人"
																			readonly="readonly" style="width:90%" /> 
																		<font color="red">*</font>								
																	</td>																																							
																</tr>
															</table>
														</td>
														<td width="20%" height="100%" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5"
																cellpadding="5">
																<tr>
																	<td align="right" class="font_1">主题风格</td>
																</tr>
															</table>
														</td>
														<td width="30%" height="100%">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="91%" align="left">
																		<select class="select" id="themes" name="themes" style="width:90.5%">
																			<c:forEach items="${themes}" var="item">
																				<c:choose>
																					<c:when test="${entity.themes==item.enName}">
																				   		<option value="${item.enName}" selected='selected'>${item.name}</option>
																				   	</c:when> 
																				   	<c:otherwise>
																				   		<option value="${item.enName}">${item.name}</option>
																				   	</c:otherwise>  
																				</c:choose>
																			</c:forEach>
																		</select>
																		<font color="red">*</font>												
																	</td>																																							
																</tr>
															</table>
														</td>
													</tr>
													<!-- 行分割线 -->
													<tr>
														<td height="1" class="biaotiao_xia" colspan="4"></td>
													</tr>
													<tr>
														<td width="20%" height="100%" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5"
																cellpadding="5">
																<tr>
																	<td align="right" class="font_1">账号</td>
																</tr>
															</table>
														</td>
														<td width="30%" height="100%">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="91%" align="left">
																		<form:input path="loginName" class="validate[required]" style="width:90%"/>
																		<font color="red">*</font>												
																	</td>																																							
																</tr>
															</table>
														</td>
														<td width="20%" height="100%" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5"
																cellpadding="5">
																<tr>
																	<td align="right" class="font_1">昵称</td>
																</tr>
															</table>
														</td>
														<td width="30%" height="100%">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="91%" align="left">
																		<form:input path="nickName" class="validate[required]" style="width:90%"/>
																		<font color="red">*</font>												
																	</td>																																							
																</tr>
															</table>
														</td>
													</tr>													
													<!-- 行分割线 -->
													<tr>
														<td height="1" class="biaotiao_xia" colspan="4"></td>
													</tr>
													<tr>
														<td width="20%" height="100%" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5"
																cellpadding="5">
																<tr>
																	<td align="right" class="font_1">手机号</td>
																</tr>
															</table>
														</td>
														<td width="30%" height="100%">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="91%" align="left">
																		<form:input path="mobile" class="validate[required]" style="width:90%"/>
																		<font color="red">*</font>												
																	</td>																																							
																</tr>
															</table>
														</td>
														<td width="20%" height="100%" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5"
																cellpadding="5">
																<tr>
																	<td align="right" class="font_1">电子邮箱</td>
																</tr>
															</table>
														</td>
														<td width="30%" height="100%">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="91%" align="left">
																		<form:input path="email" class="validate[required]" style="width:90%"/>
																		<font color="red">*</font>												
																	</td>																																							
																</tr>
															</table>
														</td>
													</tr>
													<!-- 行分割线 -->
													<tr>
														<td height="1" class="biaotiao_xia" colspan="4"></td>
													</tr>
													<tr>
														<td width="20%" height="100%" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5"
																cellpadding="5">
																<tr>
																	<td align="right" class="font_1">登录密码</td>
																</tr>
															</table>
														</td>
														<td width="30%" height="100%">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="91%" align="left">
																		<input id="password" name="password" style="width:90%" /> 
																		<font color="red">*</font>												
																	</td>																																							
																</tr>
															</table>
														</td>
														<td width="20%" height="100%" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5"
																cellpadding="5">
																<tr>
																	<td align="right" class="font_1">密码确认</td>
																</tr>
															</table>
														</td>
														<td width="30%" height="100%">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="91%" align="left">
																		<input id="password2" name="password2" style="width:90%" /> 
																		<font color="red">*</font>												
																	</td>																																							
																</tr>
															</table>
														</td>
													</tr>
													<!-- 行分割线 -->
													<tr>
														<td height="1" class="biaotiao_xia" colspan="4"></td>
													</tr>													
													<tr>	
														<td width="20%" height="30" class="biantiao_you">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																	<tr>
																		<td width="25%" align="right" class="font_1">
																			<nobr>账号说明</nobr>
																		</td>																				
																	</tr>
																</table>																		
														</td>
														<td width="30%" height="30" colspan="4">
															<table width="100%" border="0" cellspacing="5" cellpadding="5">
																<tr>																				
																	<td width="100%" align="left">
																		<form:textarea path="remark" rows="12" cols="79" style="width:96.5%"/>
																	</td>
																</tr>
															</table>
														</td>	
													</tr>
													<!-- 行分割线 -->
													<tr>
														<td height="1" class="biaotiao_xia" colspan="4"></td>
													</tr>
													<tr>																
														<td colspan="4" align="center" height="230px">
															<table>
																<tr>
																	<td>
																		<fieldset style="text-align: right; float: left; width: 150px; height: 200px">
																			<legend>系统角色</legend>
																			<select multiple="multiple" name="sysRoleList" size="8" style="width:100%;height:100%" 
																				ondblclick="addRole()">
																				<c:forEach items="${sysRoleList}" var="item">
																					<option value="${item.id}">${item.name}</option>
																				</c:forEach>
																			</select>
																		</fieldset>
																	</td>
																	<td>
																		<div class="arrow_button">
																			<font class="arrow_right" onclick="addRole();"></font>
																			<font class="arrow_left" onclick="delRole();"></font>
																		</div>
																	</td>
																	<td>
																		<fieldset style="text-align: left; float: left; width: 150px; height: 200px" >
																			<legend>账号角色</legend>
																			<input type="hidden" id="roleResult" name="roleResult" />
																			<select multiple="multiple" name="accountRoleList" size="8" style="width:100%;height:100%" 
																				ondblclick="delRole();">
																				<c:forEach items="${accountRoleList}" var="item">
																					<option value="${item.id}">${item.name}</option>
																				</c:forEach>
																			</select>
																		</fieldset>
																	</td>
																</tr>
															</table>
														</td>
													</tr>
													<!-- 行分割线 -->
													<tr>
														<td height="1" class="biaotiao_xia" colspan="4"></td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
								<td width="1" class="biao3_you"></td>
							</tr>
						</table>
					</td>
				</tr>
				<!-- 行分割线 -->
				<tr>
					<td colspan="4">
						<div style="height: 1;" class="biaotiao_xia"></div>
					</td>
				</tr>
				</td>
				</tr>
			</table>
		</div>
	</form:form>	
</body>
</html>
